// element plus 按需导入模块
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

// 端口号
const port = process.env.port || 9200; // dev port
module.exports = {
  // transpileDependencies: [true],
  publicPath: './', //''或 './'，这样所有的资源都会被链接为相对路径
  // 配置element plus 模块
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  },
  chainWebpack: (config) => {
    // 配置项目标题
    config.plugin('html').tap((args) => {
      args[0].title = '啊熊开发~';
      return args;
    });
    //配置自定义常量(用的少)
    config.plugin('define').tap((args) => {
      Object.keys(process.env).forEach((key) => {
        // 忽略含有 npm、VSCODE 的环境常量
        /npm|VSCODE/.test(key) || (args[0]['process.env'][key] = JSON.stringify(process.env[key]));
      });
      return args;
    });
    // 打包时候去除console.log
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true;
      return args;
    });
  },

  //前端反向代理 (开发模式起作用,生产模式不起作用)
  devServer: {
    port: port,
    // 方式一（只能向一台服务器拿资源 单一）
    // proxy: 'http://192.168.0.189:3000',

    //方式二 (可以向多个服务请求资源)
    proxy: {
      '/apicx': {
        target: 'http://192.168.0.189:3000',
        pathRewrite: {
          '^/apicx': ''
        },
        // ws: true,//用于支持websocket
        changeOrigin: true //给服务器提示来自哪里host true做撒谎作用 false如实回答
      }
    }
  }
};
